<template>
  <div class="user_operation_div" v-show="!isOwner">
    <a-button type="primary" v-show="!isFollow" :size="size" :loading='followLoading' @click="changeFollow">
      <template #icon>
        <PlusOutlined/>
      </template>
      关注
    </a-button>
    <a-button type="primary" v-show="isFollow" :size="size" :loading='followLoading' @click="changeFollow">
      <template #icon>
        <CheckOutlined/>
      </template>
      已关注
    </a-button>
    <a-button type="primary" :size="size" @click="mail.visible=true" ghost>
      <template #icon>
        <MailOutlined/>
      </template>
      <span v-if="size!=='small'">私信</span>
      <a-modal v-model:visible="mail.visible" title="发送私信" :width="800" @ok="sendMessage">
        <a-textarea v-model:value="mail.content" :maxlength="500" :autosize="{ minRows: 5, maxRows: 10 }"
                    showCount placeholder="文明发言，请填写私信内容..."/>
      </a-modal>
    </a-button>
    <a-button type="danger" :size="size" @click="alert.visible=true" ghost>
      <template #icon>
        <AlertOutlined/>
      </template>
      <a-modal v-model:visible="alert.visible" title="举报用户" :width="800" @ok="sendAlert">
        <a-textarea v-model:value="alert.content" :maxlength="500" :autosize="{ minRows: 5, maxRows: 10 }"
                    showCount placeholder="请填写举报原因..."/>
      </a-modal>
    </a-button>
  </div>
</template>

<script>
import { computed, defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
import { AlertOutlined, CheckOutlined, MailOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { Follow, UnFollow } from '@/service/operate'
import { SendAlert, SendMessage } from '@/service/message'

export default defineComponent({
  props: {
    userId: {
      type: String
    },
    isOwner: {
      type: Boolean,
      default () {
        return false
      }
    },
    isFollow: {
      type: Boolean,
      default () {
        return false
      }
    },
    size: {
      type: String,
      default () {
        return 'medium'
      }
    }
  },
  emits: ['change'],
  setup (props, context) {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      userId: computed(() => props.userId),
      isOwner: computed(() => props.isOwner),
      isFollow: props.isFollow,
      size: computed(() => props.size),
      followLoading: false,
      mail: {
        visible: false,
        content: ''
      },
      alert: {
        visible: false,
        content: ''
      }
    })

    const methods = reactive({
      changeFollow: async () => {
        state.followLoading = true
        state.isFollow ? await UnFollow(state.userId) : await Follow(state.userId)
        state.isFollow = !state.isFollow
        context.emit('change', state.isFollow)
        state.followLoading = false
      },
      sendMessage: async () => {
        if (state.mail.content.trim().length === 0) {
          proxy.$message.info('请输入内容！')
          return
        }
        await SendMessage({
          receiverId: state.userId,
          content: state.mail.content.trim()
        })
        state.mail.visible = false
        state.mail.content = ''
        proxy.$message.success('已发送！')
      },
      sendAlert: async () => {
        if (state.alert.content.trim().length === 0) {
          proxy.$message.info('请输入举报原因！')
          return
        }
        await SendAlert({
          userId: state.userId,
          content: state.alert.content.trim()
        })
        state.alert.visible = false
        state.alert.content = ''
        proxy.$message.success('已举报！')
      }
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  },
  components: {
    AlertOutlined,
    CheckOutlined,
    MailOutlined,
    PlusOutlined
  }
})
</script>

<style lang="less" scoped>
.user_operation_div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
